<template>
    <div class="box">
        <div class="header">
            <div class="header-top">
                <p>我的</p>
            </div>
            <div class="header-bottom">
                <img src="static/images/img_03.png" />
            </div>
        </div>
        <div class="main-box">
            <div class="mainbox-top">
                <p>——  我的订单  ——</p>
            </div>
            <div class="mainbox-bottom">
                <div class="mainbox-left">
                    <img src="static/images/img_07.png" />
                    <p>电影</p>
                </div>
                <div class="mainbox-right">
                    <img src="static/images/img_10.png" />
                    <p>商城</p>
                </div>
            </div>
        </div>
        <div class="main-box2">
             <div class="line-box">
                 <div class="linebox">
                     <span>在线观影</span>
                     <img src="static/images/img_15.png" />
                 </div>
             </div>
             <div class="line-box2">
                 <div class="linebox2">
                     <span>优惠券</span>
                     <img src="static/images/img_15.png" />
                 </div>
             </div>
             <div class="line-box3">
                 <div class="linebox3">
                     <span>折扣卡</span>
                     <img src="static/images/img_15.png" />
                 </div>
             </div>
        </div>
    </div>
</template>
<script type="text/javascript">
    // 适配移动端尺寸
    window.onload = function() {
        console.log(document.documentElement)
        // 
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 445 * 100 + 'px';
        window.onresize = function() {
            document.documentElement.style.fontSize = document.documentElement.clientWidth / 445 * 100 + 'px';
        }
    }
</script>
<style scoped>
    body{
        background: #f3f3f3;
    }
            *{
				margin: 0;
				padding: 0;
				text-decoration: none;
				list-style-type: none;
			}
			.box{
				width: 4.45rem;
                background: #f3f3f3;
                position: absolute;
                left: 0%;
                top: 0%;
                bottom: 0;
                right: 0%;
			}
			.header{
				width: 4.45rem;
				height: 2.38rem;
				background: #e64c46;
			}
			.header-top{
				width: 4.45rem;
				height: 0.56rem;
			}
			.header-top p{
				font-size: 0.2rem;
				text-align: center;
				line-height: 0.56rem;
				color: white;
			}
			.header-bottom{
				width: 4.45rem;
				height: 1.82rem;
			}
			.header-bottom img{
				width: 0.8rem;
				height: 0.8rem;
				margin-left: 1.8rem;
				margin-top: 0.4rem;
			}
			.main-box{
				width: 4.45rem;
				height: 1.76rem;
				background: white;
				margin-top: 0.12rem;
			}
			.mainbox-top{
				width: 4.45rem;
				height: 0.5rem;
			}
			.mainbox-top p{
				font-size: 0.2rem;
				text-align: center;
				line-height: 0.5rem;
			}
			.mainbox-bottom{
				width: 4.45rem;
				height: 1.24rem;
			}
			.mainbox-left{
				width: 2.22rem;
				height: 1.24rem;
				float: left;
				position: relative;
			}
			.mainbox-left img{
				width: 0.5rem;
				height: 0.5rem;
				position: absolute;
				top: 0.2rem;
				left: 0.86rem;
			}
			.mainbox-left p{
				font-size: 0.17rem;
				text-align: center;
				margin-top: 0.8rem;
			}
			.mainbox-right{
				width: 2.22rem;
				height: 1.24rem;
				float: left;
				position: relative;
			}
			.mainbox-right img{
				width: 0.5rem;
				height: 0.5rem;
				position: absolute;
				top: 0.2rem;
				left: 0.86rem;
			}
			.mainbox-right p{
				font-size: 0.17rem;
				text-align: center;
				margin-top: 0.8rem;
			}
			.main-box2{
				width: 4.45rem;
				height: 1.56rem;
				background: white;
				margin-top: 0.12rem;
			}
			.line-box{
				width: 4.45rem;
				height: 0.52rem;
			}
			.linebox{
				width: 4.26rem;
				height: 0.52rem;
				margin-left: 0.19rem;
				border-bottom: 0.01rem solid #f3f3f3;
				position: relative;
			}
			.linebox span{
				font-size: 0.17rem;
				position: absolute;
				left: 0;
				line-height: 0.58rem;
			}
			.linebox img{
				width: 0.1rem;
				height: 0.17rem;
				position: absolute;
				right: 0.2rem;
				top: 0.2rem;
			}
			.line-box2{
				width: 4.45rem;
				height: 0.52rem;
			}
			.linebox2{
				width: 4.26rem;
				height: 0.52rem;
				margin-left: 0.19rem;
				border-bottom: 0.01rem solid #f3f3f3;
				position: relative;
			}
			.linebox2 span{
				font-size: 0.17rem;
				position: absolute;
				left: 0;
				line-height: 0.58rem;
			}
			.linebox2 img{
				width: 0.1rem;
				height: 0.17rem;
				position: absolute;
				right: 0.2rem;
				top: 0.2rem;
			}
			.line-box3{
				width: 4.45rem;
				height: 0.52rem;
			}
			.linebox3{
				width: 4.26rem;
				height: 0.52rem;
				margin-left: 0.19rem;
				position: relative;
			}
			.linebox3 span{
				font-size: 0.17rem;
				position: absolute;
				left: 0;
				line-height: 0.58rem;
			}
			.linebox3 img{
				width: 0.1rem;
				height: 0.17rem;
				position: absolute;
				right: 0.2rem;
				top: 0.2rem;
			}
</style>